<template>
  <div class="hello">
    <p class="red">来自Parent的value: {{parentModelMSG}}</p>
    <p>
      <input v-model="parentModelMSG" type="text" />
    </p>
  </div>
</template>

<script>
export default {
  name: "Child",
  props: {
    msg: String
  },
  data() {
    return {
      name: "",
      parentModelMSG: this.msg
    };
  },
  watch: {
    parentModelMSG() {
      this.$emit("update:msg", this.parentModelMSG);  
      // this.$emit("update:msg", {
      //   //注意这个事件的格式是`update:${属性名}`这个属性名就是props那个key
      //   msg: this.parentModelMSG
      // });
    },
    msg: {
      //data改变的时候同步到子组件
      deep: true,
      handler(value) {
        this.parentModelMSG = value;
        // {
        //   //注意这个事件的格式是`update:${属性名}`这个属性名就是props那个key
        //   msg: value.msg
        // }
      }
    }
  }
};
</script>